<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="action('新增角色')">新增</el-button>
		</el-header>

		<el-main>
			<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#FAFAFA' }">
				<el-table-column label="角色名">
					<template slot-scope="scope">
						<span>{{ translateLabel(scope.row, 'roleName') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="角色代码">
					<template slot-scope="scope">
						<span>{{ translateLabel(scope.row, 'roleCode') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建人" prop="createdUser" />
				<el-table-column prop="address" label="操作" width="220px">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="action('配置字段', scope.row)">配置字段</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="action('删除', scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>

		<role-dialog
			:roleVisible.sync="roleVisible"
			:roleTitle="roleTitle"
			:tableData="tableData"
			:selectedRow="selectedRow"
			:roleInfoOptions="roleInfoOptions"
			@updateList="getUserList()"
		></role-dialog>
	</el-container>
</template>

<script>
import { delRole, completeUserList, systemUsers } from '@/api/productApi/rolesSetting'
import { mapState } from 'vuex'
import RoleDialog from './components/role-dialog/index.vue'
export default {
	data() {
		return {
			tableData: [],
			roleVisible: false,
			roleTitle: '',
			selectedRow: {},
			roleInfoOptions: []
		}
	},

	computed: {
		...mapState({
			systemId: state => state.user.systemId
		})
	},

	components: {
		RoleDialog
	},

	mounted() {
		this.getSystemUsers()
	},

	methods: {
		translateLabel(row, label) {
			const arr = this.roleInfoOptions.filter(item => item.pkId === row.roleId)
			return arr.length ? arr[0][label] : ''
		},

		getSystemUsers() {
			systemUsers({ systemCode: 'ItApp-ProductInfo-Management' }).then(res => {
				if (res.msgCode === 'Y') {
					this.getUserList()
					this.roleInfoOptions = res.data.body
				} else {
					this.$message({ message: res.msgDesc, type: 'error' })
				}
			})
		},

		getUserList() {
			completeUserList().then(res => {
				if (res.msgCode === 'Y') {
					this.tableData = res.data.body
				} else {
					this.$message({ message: res.msgDesc, type: 'error' })
				}
			})
		},

		action(title, item) {
			if (title === '新增角色') {
				this.roleTitle = title
				this.roleVisible = !this.roleVisible
				this.selectedRow = {}
			} else if (title === '删除') {
				this.operatorComfirm(() => {
					delRole(item.keyId).then(res => {
						if (res.msgCode === 'Y') {
							this.$message({
								showClose: true,
								message: '删除成功',
								customClass: 'el-messageClass',
								type: 'success'
							})
							this.getUserList()
						} else {
							this.$message({ message: res.msgDesc, customClass: 'el-messageClass', type: 'error' })
						}
					})
				}, '删除该角色')
			} else if (title === '配置字段') {
				this.roleTitle = title
				this.selectedRow = item
				this.roleVisible = true
			}
		}
	}
}
</script>

<style lang="scss" scoped src='./index.scss'>
</style>
